<template>
    <div class="comment">
        <input type="text" class="name" placeholder="请输入姓名" v-model="val1" @keydown.13="add">
        <br>
        <input type="text" class="content" placeholder="请输入留言" v-model="val2" @keydown.13="add">
        <br>
        <button @click.13="add">提交评论</button>
    </div>
</template>
<script>
    import * as api from "../../api/index"
    export default {
        data(){
            return{
                val1:'',
                val2:''
            }
        },
        methods:{
            add(){
                if(!this.val1 || !this.val2){
                    alert('请输入正确的信息')
                }else{
                    api.addComment(this.val1,this.val2)
                    .then(res=>{
                        console.log(res);
                        this.val1 = '';
                        this.val2 = '';
                        api.getComment().then(res=>{
                            this.$bus.$emit("comList",res.data.data)
                        })
                    })
                }
            }
        }
    }
</script>
<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    .name{
        width: 200px;
        height: 30px;
        margin: 30px 0;
    }
    .content{
        width: 500px;
        height: 100px;
        margin-bottom: 30px;
    }
</style>